@import 'base.less';
@index : 99;
@icon-size: 14px;
.home{
	height: 220px;
	background-color: #fff;
	border: 1px solid @border-color;

	.mac-app &{
    	border: 1px solid @mac-border-color;
    }

	&__list{
		position: relative;
		&:hover>&--link{
			-webkit-transform: rotateY(-1deg);
			transform: rotateY(-1deg);
		}

		&--link{

			position: absolute;
			top:0;
			left: -633px;
			width: 660px;
			border: 1px solid @color-green;
			background-color: #fff;
		    -webkit-transform: rotateY(-90deg);
		    transform: rotateY(-90deg);
		    -webkit-transform-origin: right center;
		    transform-origin: right center;
		    -webkit-transition: -webkit-transform .3s ease;
		    transition: transform .3s ease;
		    z-index: @index - 1;

		    &:after{
		    	content: '';
		    	position: absolute;
		    	top:0;
		    	right:-1px;
		    	width: 1px;
		    	height: 40px;
		    	background-color: #fff;
		    }

		    li{
		    	width: 20%;
			    height: 30px;
			    line-height: 30px;
			    margin: 15px 0;
			    float: left;
			    text-align: center;
			    cursor: pointer;

			    a{
			    	display: block;
			    	color: @color-0-54;

			    	&:hover{
			    		color: @color-green;
			    	}
			    }
		    }

		    &:hover+a{
		    	color: @color-green;
				border-color: @color-green;
				border-left-color: transparent;
				z-index: @index;
		    }
		}


		&--btn{
		    position: relative;
			display: block;
		    width: 180px;
		    line-height: 40px;
		    text-indent: 14px;
		    margin: 23px auto;
		    text-align: center;
		    color: @color-0-54;
		    border: 1px solid @border-color;
		    background-color: #fff;
		    z-index: @index - 2;

		    .mac-app &{
		    	border: 1px solid @mac-border-color;
		    }

		    &[data-icon=faculty]:before {
			    background-position: 0 -28px
			}

			&[data-icon=renren]:before {
			    background-position: 0 0
			}

			&[data-icon=weibo]:before {
			    background-position: 0 -14px
			}

			&:hover{
				color: @color-green;
				border-color: @color-green;
				border-left-color: transparent;
				z-index: @index;
			}

		    &:before{
		    	content: " ";
			    position: absolute;
			    display: inline-block;
			    width: @icon-size;
			    height: @icon-size;
			    top: 0;
			    bottom: 0;
			    left: 50px;
			    margin: auto;
			    background: url(../static/images/icon-home.png) no-repeat;
			    background-size: 100%;
		    }
		}
	}
}